<template>
    <div>
        <van-sticky>
            <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        </van-sticky>
        <van-tabs v-model="activeName">
            <van-tab title="全部" name="a"></van-tab>
            <van-tab title="待付款" name="b"></van-tab>
            <van-tab title="代发货" name="c"></van-tab>
            <van-tab title="已取消" name="d"></van-tab>
        </van-tabs>

        <div v-for="(item, index) in orderList" :key="item.orderId" class="pl-10 pr-10 bfff mb-10">
            <router-link :to="'/order/detail/' + item.orderId">
                <div class="h120 fcb">
                    <div class="ovh fl fg1">
                        <img v-for="(cartItem, cartIndex) in item.carts" :key="cartItem.cartId" class="img"
                            :src="cartItem.imgUrl" alt="">
                    </div>
                    <div class="fls0">
                        <van-icon name="arrow" color="#666" />
                    </div>
                </div>
            </router-link>
            <div class="fcb h40 bbs bts">
                <div class="fc f14 ">
                    <p>共{{ item.carts.length }}件商品</p>
                    <p class="ml-10">实付<span class="cc03131 ml-5">￥{{ (item.totalMoney / 100).toFixed(2) }}</span>
                    </p>
                </div>
                <van-icon name="close" color="#c03131" size="22px" @click="postDel(item.orderId)" />
            </div>
            <div class="fcb h50">
                <div class="fc f14 ">
                    <p v-if="item.orderStatus === '00'" class="c797d82">订单状态:
                        <span class=" ml-5">已取消</span>
                    </p>
                    <p v-else-if="item.orderStatus === '01'" class="c797d82">订单状态:
                        <span class=" ml-5">已支付</span>
                    </p>
                    <p v-else-if="item.orderStatus === '02'" class="c797d82 fc">剩余支付时间：
                        <span class=" ml-5"><van-count-down :time="getCountdownTime(item.createTime)"
                                format="mm 分 ss 秒" /></span>
                    </p>
                </div>
                <van-icon name="shopping-cart-o" size="22px" />
            </div>

        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs, Icon, NavBar, Dialog,Sticky } from 'vant';
import request from '../../utils/request'
import { CountDown } from 'vant';

Vue.use(CountDown);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Sticky);

export default {
    data() {
        return {
            activeName: 'a',
            orderList: [],
        };
    },
    created() {
        this.getOrder();
    },
    methods: {
        async getOrder() {
            let params = {
                currPage: 1
            };
            await request.get('/order/list', { params }).then(res => {
                this.orderList = res.list
            })
        },
        postDel(id) {
            Dialog.confirm({
                message: '是否确认删除',
            }).then(() => {
                let data = {
                    orderId: id
                }
                request.post('/order/del',data);
                this.orderList = this.orderList.filter(item => item.orderId !== id);
            }).catch(() => {
                // on cancel
            });
        },
        getCountdownTime(createTime) {
            const fifteenMinutes = 15 * 60 * 1000;
            const endTime = createTime + fifteenMinutes;
            const now = Date.now();
            const countTime = endTime - now;
            return countTime > 0 ? countTime : 0;
        },
    },
};
</script>

<style scoped>
.img {
    width: 70px;
    height: 70px;
    background-color: #f9f9f9;
    margin-right: 10px;
}

.bbs {
    border-bottom: 1px solid #ece9e9;
}

.bts {
    border-top: 1px solid #ece9e9;
}
</style>